<!-- 选择资产 -->

<template>
  <div class="FormChoose">
    <MyParam @change="toRefresh" />

    <div class="FormChoose-left">
      <MyRegion class="FormChoose-MyTree el-textarea__inner" @change="toRefresh" />
      <MyWaiting class="FormChoose-MyWaiting el-textarea__inner" />
    </div>

    <div class="FormChoose-middle">
      <MyBtn class="FormChoose-MyBtn" @change="toChange" />
    </div>

    <div class="FormChoose-right">
      <MyChosen class="FormChoose-MyChosen el-textarea__inner" />
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import store from './store'
import props from './props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'ChooseDevice',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixStore(store)],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(
    require.context('../components', true, /vue$/),
    require.context('./', true, /vue$/),
  ),

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听数据对象
     */
    obj: {
      immediate: true,
      handler() {
        const { obj, bind, idKey, param, info, areaId, assetTypeId, $props } = this
        const id = CORE.isJSON(obj[bind]) ? obj[bind][idKey] : ''
        Object.assign(param, {
          assetName: '',
          areaId,
          assetTypeId,
          idList: id ? [id] : [],
        })
        Object.assign(info, $props) // 不能使用 setInfo()，防止深度复制
        this.toRefresh()
      },
    },

    /**
     * 监听禁用列表
     */
    grayed(grayed) {
      this.info.grayed = grayed
    },
  },

  /**
   * 创建完成 (先抽取再调用)
   */
  created() {
    this.region_setTree(CORE.REGION.MY_TREE || [])
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 刷新列表
     */
    toRefresh() {
      this.setList()
      this.startList()
    },

    /**
     * 切换选中
     */
    toChange(data) {
      this.$emit('change', data)
    },
  },
}
</script>
